<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_009_分支结构</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="score" />
        <!-- v-if渲染出来的只有一个div，在控制台上只看得到一个div，就是是否渲染的意思 -->
        <div v-if="score<60">不及格</div>
        <div v-else-if="score<=80">一般</div>
        <div v-else-if="score<=90">良好</div>
        <div v-else="score<=100">优秀</div>
        <!-- >v-show已经渲染了，如果值为false时，其实就是把属性设置为了隐藏，display:none ，就是是否显示的意思-->
        <!-- 在控制台上有两个div，显示只有一个div -->
        <div v-show="flag1">v-show已经渲染了，如果值为false时，其实就是把属性设置为了隐藏，display:none</div>
        <div v-show="flag2">v-show已经渲染了，如果值为false时，其实就是把属性设置为了隐藏，display:none</div>
    </div>


    <script src="js/vue.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el:'#app',
            data:{
                score:99,
                flag1:true,
                flag2:false
            }
        });

    </script>
</body>

</html></SCRIPT>